<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>

	</head>
	<body>
		<!-- 
			事件修饰符
			.prevent     阻止默认事件
			.stop        阻止冒泡
			.once        只触发一次
			...
			
			注意: 修饰符可以连续使用
		 -->
		<div id="app">
			<!-- 解除超链接的默认行为 -->
			<!-- 阻止冒泡 -->
			<a href="https://www.baidu.com" v-on:click.stop.prevent="doSomething">超链接</a>

			<!-- 注意:此方式对vue的版本有要求,2.1.4新增 -->
			<a v-on:click.once="doSomething">只触发一次</a>

			<!-- 只有指定的按键才能触发,13表示回车键 -->
			<!-- <input type="text" v-on:keyup.13="doSomething"/> -->

			<!-- 
				.enter   回车
				.tab
				.esc
				.delete
				.alt
				.shift
				.ctrl
				.up
				.down
				.left
				.right
				...
			 -->
			<input type="text" @keyup.enter="doSomething" />
			
			<!-- 组合 -->
			<input type="text" @keyup.ctrl.delete="doSomething" />
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {

					}
				},
				methods: {
					doSomething: function() {
						alert("函数被调用了...");
					}
				}
			});
		</script>
	</body>
</html>
